<template>
    <div class="dynamic">
        <mt-navbar class="page-part nav flex p-lr-6" v-model="selected">
            <mt-tab-item id="1">推荐</mt-tab-item>
            <mt-tab-item id="2">作品</mt-tab-item>
            <mt-tab-item id="3">关注</mt-tab-item>
            <mt-tab-item id="4">好友</mt-tab-item>
            <!--<div>
                <i class="iconfont icon-jia"></i>
            </div>-->
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-tap="test()">
                    <li v-for="(list , index) in dynamicAll">
                        <div class="width-75 m-t-28">
                            <div class="rt" @click="showAttention(index,0)">
                                <i class="iconfont icon-xia"></i>
                            </div>
                            <!--头像、名字和学校-->
                            <div class="row">
                                <div>
                                    <img :src="list.dynamic.user.portrait" alt="" class="portrait">
                                </div>
                                <div class="m-l-14">
                                    <h2 class="fs-36 c-3">{{list.dynamic.user.nickName}}</h2>
                                    <p class="fs-24 c-3 m-t-18">{{list.dynamic.school.name}}</p>
                                </div>
                            </div>
                            <!--/dynamicDetails?dynamicId=list.dynamic.dynamicId-->
                            <router-link :to="{path:'/dynamicDetails',query:{id:list.dynamic.dynamicId}}">
                                <!--动态的内容-->
                                <div class="fs-32 l-h-4 m-t-18 c-3">
                                    {{list.dynamic.dynamicBody}}
                                </div>
                                <!--动态图片-->
                                <!--arr[i].dynamic.image-->
                                <div class="m-t-18">
                                    <img v-for="imgs in dynamicAll[index].dynamic.image" :src="imgs" alt="" class="dynameic-img m-l-25">
                                </div>
                                <!--点赞、评论、留言、转发-->
                                <div class="flex m-t-4 c-3">
                                    <div class="">预览{{list.dynamic.browse}}次</div> 
                                    <div class="flex dynamic-icon"> 
                                        <div>
                                            <i class="iconfont icon-fenxiang fs-28"> </i>
                                            <span class="fs-24">分享</span>
                                        </div>
                                        <div>
                                            <i class="iconfont icon-shuohuaqipao fs-28"></i>
                                            <span class="fs-24">{{list.listDynamicComment.length}}</span>
                                        </div>
                                        <div>
                                            <i class="iconfont icon-dianzan-copy fs-28"></i>
                                            <span class="fs-24">
                                                {{list.listThumbsUp.length}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                        <div v-if="list.isShow" class="modal">
                            <ul class="dynamicModal-ul">
                                <li class="c-3 fs-30 dynamic-list tc" @click="addAttention(list.dynamic.user.username),showAttention(index,0)" v-if="list.follow == false">
                                    关注此人
                                </li>
                                <li class="c-3 fs-30 dynamic-list tc" @click="deleFollow(list.dynamic.user.username,1),showAttention(index,0)" v-if="list.follow == true">
                                    取消关注
                                </li>
                                <li class="c-3 fs-30 dynamic-list tc" @click="shield(list.dynamic.dynamicId),showAttention(index,0)">
                                    屏蔽此人
                                </li>
                                <li class="c-3 fs-30 dynamic-list tc" @click="showAttention(index,0)">
                                    取消
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <ul v-if="selected =='2'">
                    <li v-for="(list , index) in dynamicAll1">
                        <div class="width-75 m-t-28">
                            <!--头像、名字和学校-->
                            <div class="row">
                                <div>
                                    <img :src="list.dynamic.user.portrait" alt="" class="portrait">
                                </div>
                                <div class="m-l-14">
                                    <h2 class="fs-36 c-3">{{list.dynamic.user.nickName}}</h2>
                                    <p class="fs-24 c-3 m-t-18">{{list.dynamic.school.name}}</p>
                                </div>
                            </div>
                            <router-link :to="{path:'/dynamicDetails',query:{id:list.dynamic.dynamicId}}">
                                <!--动态的内容-->
                                <div class="fs-32 l-h-4 m-t-18 c-3">
                                    {{list.dynamic.dynamicBody}}
                                </div>
                                <!--动态图片-->
                                <div class="m-t-18">
                                    <img v-for="imgs in dynamicAll1[index].dynamic.image" :src="imgs" alt="" class="dynameic-img">
                                </div>
                                <!--点赞、评论、留言、转发-->
                                <div class="flex m-t-4 c-3">
                                    <div class="">预览{{list.dynamic.browse}}次</div> 
                                    <div class="flex dynamic-icon">  
                                        <div>
                                            <i class="iconfont icon-fenxiang fs-28"> </i>
                                            <span class="fs-24">分享</span>
                                        </div>
                                        <div>
                                            <i class="iconfont icon-shuohuaqipao fs-28"></i>
                                            <span class="fs-24">{{list.listDynamicComment.length}}</span>
                                        </div>
                                        <div>
                                            <i class="iconfont icon-dianzan-copy fs-28"></i>
                                            <span class="fs-24">
                                                {{list.listThumbsUp.length}}
                                            </span>
                                        </div>
                                    </div> 
                                </div>
                            </router-link>
                            <!--聊天内容-->
                            <!--input框-->
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <ul>
                    <li v-for="(list , index) in attention">
                        <div class="width-75 m-t-28">
                            <div class="rt" @click="showAttention(index,1)">
                                <i class="iconfont icon-xia"></i>
                            </div>
                            <!--头像、名字和学校-->
                            <div class="row">
                                <div>
                                    <img :src="list.dynamic.user.portrait" alt="" class="portrait">
                                </div>
                                <div class="m-l-14">
                                    <h2 class="fs-36 c-3">{{list.dynamic.user.nickName}}</h2>
                                    <p class="fs-24 c-3 m-t-18">{{list.dynamic.school.name}}</p>
                                </div>
                            </div>
                            <!--/dynamicDetails?dynamicId=list.dynamic.dynamicId-->
                            <router-link :to="{path:'/dynamicDetails',query:{id:list.dynamic.dynamicId}}">
                                <!--动态的内容-->
                                <div class="fs-32 l-h-4 m-t-18 c-3">
                                    {{list.dynamic.dynamicBody}}
                                </div>
                                <!--动态图片-->
                                <!--arr[i].dynamic.image-->
                                <div class="m-t-18">
                                    <img v-for="imgs in attention[index].dynamic.image" :src="imgs" alt="" class="dynameic-img m-l-25">
                                </div>
                                <!--点赞、评论、留言、转发-->
                            </router-link>
                            <div class="flex m-t-4 c-3">
                                <div class="">预览{{list.dynamic.browse}}次</div> 
                                <div class="flex dynamic-icon"> 
                                    <div>
                                        <i class="iconfont icon-fenxiang fs-28"> </i>
                                        <span class="fs-24">分享</span>
                                    </div>
                                    <div>
                                        <i class="iconfont icon-shuohuaqipao fs-28"></i>
                                        <span class="fs-24">{{list.listDynamicComment.length}}</span>
                                    </div>
                                    <div>
                                        <i class="iconfont icon-dianzan-copy fs-28"></i>
                                        <span class="fs-24">
                                            {{list.listThumbsUp.length}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="index-blank m-t-18">
                        </div>
                        <div v-if="list.isShow" class="modal">
                            <ul class="dynamicModal-ul">
                                <li class="c-3 fs-30 dynamic-list tc" @click="deleFollow(list.dynamic.user.username),showAttention(index,1)">
                                    取消关注
                                </li>
                                <li class="c-3 fs-30 dynamic-list tc" @click="shield(list.dynamic.dynamicId),showAttention(index,1)">
                                    屏蔽此人
                                </li>
                                <li class="c-3 fs-30 dynamic-list tc" @click="showAttention(index,1)">
                                    取消
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <div>
                    <div class="c-3 fs-32 dynamic-list">
                        <router-link to="/addFriend">
                            <div class="flex width-75">
                                <p>
                                    添加好友
                                </p>
                                <p>
                                    <i class="iconfont icon-xia fs-28"></i>
                                </p>
                            </div>
                        </router-link>
                    </div>
                    <!--<div class="c-3 fs-32 dynamic-list">
                                                            <div class="flex width-75">
                                                                <p>
                                                                    新朋友
                                                                </p>
                                                                <p>
                                                                    <i class="iconfont icon-xia fs-28"></i>
                                                                </p>
                                                            </div>
                                                        </div>-->
                    <div class="index-blank"></div>
                    <!--我的好友-->
                    <div>
                        <div class="c-3 fs-32 dynamic-list">
                            <div class="width-75">
                                <p>
                                    我的好友
                                </p>
                            </div>
                        </div>
                        <ul>
                            <li class="c-3 fs-32 dynamic-list" v-for="list in friendList">
                                <router-link :to="{path:'/friendRelease',query:{id:list.userid}}">
                                    <div class="width-75">
                                        <p>
                                            <img :src="list.avatar" alt="" class="friend-portrait">
                                            <span>{{list.userName}}</span>
                                        </p>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>

          <!--底部-->
        <div>
            <div style="margin-bottom: 1rem">

            </div>
            <ul class="flex p-lr-6 footer">
                <li>
                    <router-link to="/index">
                        <img src="../img/news-h.png" alt="" class="footer-icon">
                        <p>资讯</p>
                    </router-link>
                </li>
                <li>
                    <router-link  to="/dynamic">
                        <img src="../img/dynamic-h.png" alt="" class="footer-icon">
                        <p>动态</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/release">
                        <img src="../img/choice.png" alt="" class="footer-icon-big">
                    </router-link>           
                </li>
                <li>
                    <router-link to="/raise">
                        <img src="../img/raise.png" alt="" class="footer-icon">
                        <p>筹帮</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/unused">
                        <img src="../img/unused.png" alt="" class="footer-icon">
                        <p>闲置</p>
                    </router-link>
                </li>
            </ul>
        </div> 
    </div>
</template>
<script>  
import { f } from '../assets/js/common';
import {MessageBox} from 'mint-ui';
export default {
    data() {
        return {
            selected: '1',
            page: 0,
            page1: 0,
            dynamicAll: [],
            dynamicAll1: [],
            attention: [],   //关注人的动态
            friendList: "",    //好友列表
        };
    },
    methods: {
        test() {
             
        },
        // 推荐动态
        dynamic() {
            var params = new URLSearchParams();
            params.append("page", this.page);
            params.append("rows", 4);

            this.$http({
                method: "post",
                url: localPath + '/dynamic/pageSearchDynamic',
                data: params
            }).then((data) => {
                // console.log(data.data.message.rows);
                var arr = data.data.message.rows;

                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].dynamic.image == "" || arr[i].dynamic.image == null) {

                    } else {
                        arr[i].dynamic.image = arr[i].dynamic.image.split(",");
                    }
                    arr[i].isShow = false;
                    this.dynamicAll.push(arr[i]);

                }
                console.log(this.dynamicAll);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 无线下拉
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                if (this.selected == 1) {
                    this.page += 1;
                    this.dynamic();
                } else if (this.selected == 3) {
                    this.page1 += 1;
                    this.attentionState();
                } else {

                }
                this.loading = false;
            }, 500);
        },
        // 自己的动态
        mydynamic() {
            this.$http({
                method: "post",
                url: localPath + '/dynamic/selectMyToDynamic',
            }).then((data) => {
                var arr = data.data.message;
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].dynamic.image == "" || arr[i].dynamic.image == null) {

                    } else {
                        arr[i].dynamic.image = arr[i].dynamic.image.split(",");
                    }

                    this.dynamicAll1.push(arr[i]);
                }
                // console.log(this.dynamicAll1);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 显示关注
        showAttention(index,is) {
            //将推荐动态的isShow变成true
            if(is == 0){
                this.dynamicAll[index].isShow = !this.dynamicAll[index].isShow;
            }else if(is == 1){
                this.attention[index].isShow = !this.attention[index].isShow;
            }
            
            console.log(index);
        },
        // 屏蔽
        shield(text) {
            var params = new URLSearchParams();
            params.append("dynamicId", text);

            this.$http({
                method: "post",
                url: localPath + '/dynamic/addDynamicShield',
                data: params
            }).then((data) => {
                var arr = data.data.message;

                 
                // console.log(this.dynamicAll1);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 添加关注
        addAttention(text) {
            var params = new URLSearchParams();
            params.append("followTo", text);

            this.$http({
                method: "post",
                url: localPath + '/follow/addFollow',
                data: params
            }).then((data) => {
                var arr = data.data;
                 MessageBox.alert(arr.message);
                 if(arr.success){
                    console.log("草");
                    this.dynamic();
                 }
                // console.log(this.dynamicAll1);
            }).catch((error) => {
                console.log(error);
            })
        },
        // /follow/deleFollow
        // 取消关注
        deleFollow(text,Number) {
            console.log(text);
            var params = new URLSearchParams();
            params.append("followId", text);

            this.$http({
                method: "post",
                url: localPath + '/follow/deleFollow',
                data: params
            }).then((data) => {
                var arr = data.data;
                // 提示
                MessageBox.alert(arr.message);
                
                if(arr.success){
                    console.log("草");
                    this.dynamic();
                 }
                // console.log(this.dynamicAll1);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 关注人的动态
        attentionState() {
            var params = new URLSearchParams();
            params.append("page", this.page1);
            params.append("rows", 4);

            this.$http({
                method: "post",
                url: localPath + '/dynamic/selectMyfollowDynamic',
                data: params
            }).then((data) => {
                // console.log(data.data.message.rows);
                var arr = data.data.message.rows;

                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].dynamic.image == "" || arr[i].dynamic.image == null) {

                    } else {
                        arr[i].dynamic.image = arr[i].dynamic.image.split(",");
                    }
                    arr[i].isShow = false;
                    this.attention.push(arr[i]);

                }
                console.log(this.attention);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 查询好友
        // /im/friendsList
        friend() {
            this.$http({
                method: "post",
                url: localPath + "/im/friendsList",
            }).then((data) => {
                var arr = data.data.list;
                for (let i = 0; i < arr.length; i++) {
                    arr[i].userid = arr[i].username.slice(4);
                }
                this.friendList = arr;
                console.log(data.data.list);
            }).catch((error) => {
                console.log(error);
            })
        },
    },
    // 18749986696
    mounted() {
        // this.mydynamic();
        this.friend();
        this.mydynamic();
        document.addEventListener(f());
    },
    watch: {
        selected() {   //this.selected不等于默认的1的时候就发生改变 就调用loadMire的这个函数
            this.loadMore();
        }
    },
    directives: {
        tap: {
            // 指令的定义
            inserted: function(el) {
                el.focus()
            }
        }
    }
};

</script>
<style>
.mint-cell-wrapper {
    padding: 0px 0px;
}

.dynamic-portrait {
    width: .87rem;
    height: .87rem;
}

.dynameic-img {
    width: 2.70rem;
    height: 2.16rem;
}

.dynamic-input {
    width: 90%;
    font-size: .24rem;
    padding: .2rem;
    height: .54rem;
    background-color: #f4f4f4;
}

.dynamic-list {
    height: 1rem;
    border: 1px solid #eeeeee;
    line-height: 1rem;
}

.friend-portrait {
    width: .6rem;
    height: .6rem;
}

.dynamicModal-ul {
    background: #fff;
    position: absolute;
    bottom: 1rem;
    width: 100%;
    z-index: 10020;
}

.dynamic-icon{
    width: 50%;
}
.dynamic .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: 0px;
}
</style>